<template>
  <div class="detailTop">
    <!-- 面包屑导航 -->
    <div class="crunbs">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item >酒店</el-breadcrumb-item>
            <el-breadcrumb-item>
                <nuxt-link to="/hotel">
                    {{ hotelData.city.name}}
                </nuxt-link>
            </el-breadcrumb-item>
            <el-breadcrumb-item>
                {{ hotelData.name }}
            </el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <!-- 酒店详情 -->
    <div class="hotelDetail">
        <div class="title">
            {{ hotelData.name }}
            <span 
            v-for="(item,index) in 5"
            :key="index">
                <i class="iconfont iconhuangguan" style="color: rgb(255, 153, 0)"></i>
            </span>
        </div>
        <div class="pinyin">
            {{ hotelData.alias }}
        </div>
        <div class="location">
            <span class="el-icon-location"></span>
            {{ hotelData.address }}
        </div>
    </div>
    <!-- 床铺图片 -->
    <div class="bedImages">
        <div class="images">
            <div class="leftContent">
                <img :src="firstUrl">
            </div>
            <div class="rightContent">
                <div class="imageContent">
                    <div 
                    v-for="(item,index) in images"
                    :key="index"
                    @click="changeImg(item)">
                        <img :src="item"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return {
            firstUrl:'http://157.122.54.189:9093/images/hotel-pics/1.jpeg',
            images: [
                'http://157.122.54.189:9093/images/hotel-pics/1.jpeg',
                'http://157.122.54.189:9093/images/hotel-pics/2.jpeg',
                'http://157.122.54.189:9093/images/hotel-pics/3.jpeg',
                'http://157.122.54.189:9093/images/hotel-pics/4.jpeg',
                'http://157.122.54.189:9093/images/hotel-pics/5.jpeg',
                'http://157.122.54.189:9093/images/hotel-pics/6.jpeg'
            ]
        }
    },
    methods:{
        changeImg(item){
            this.firstUrl = item
        }
    },
    props: {
        hotelData: {
            type: Object,
            default: {}
        }
    }
}
</script>

<style scoped lang="less">
    .detailTop{
        .crunbs{
          height: 50px;
          .el-breadcrumb{
            line-height: 50px;
            .nuxt-link-active{
                cursor: pointer;
                font-weight: 700;
            }
          }
        }
        .hotelDetail{
            .title{
                font-size: 25px;
                font-weight: 500;
                color: #bf1c1c;
                cursor: pointer;
                margin-bottom: 5px;
            }
            .pinyin{
                font-size: 14px;
            }
            .location{
                font-size: 14px;
            }
        }
        .images{
            margin-top: 30px;
            display: flex;
            height: 350px;
            justify-content: space-between;
            .leftContent{
                flex: 0 0 63%;
                background-color: skyblue;
                img{
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
            .rightContent{
                display: flex;
                flex-wrap: wrap;
                align-content: baseline;
                flex: 0 0 35%;
                .imageContent{
                    display: flex;
                    flex-wrap: wrap;
                    div{
                        max-width: 160px;
                        max-height: 110px;
                        margin-left: 10px;
                        img{
                            width: 100%;
                        }
                        &:nth-child(n+3){
                            margin-top: 10px;
                        }
                    }
                }
            }
        }
    }
</style>